<template>
	<div class="content">
		<div class="flex borderea box-align-center" style="height: 50px">
			<div class="title flex-1">标准体系概览</div>
			<div class="flex">
				<div class="tabbj ml10 flex box-align-center">
					<span v-for="(value, index) in typelist" :key="index" :class="{ active: bzactivetype === index }" @click="bztypechange(index)">{{
						value
					}}</span>
				</div>
			</div>
		</div>

		<!-- 图表 -->
		<div v-if="bzactivetype === 0" class="parent mt10 flex flex-align-center">
			<div ref="chartRefbing1" style="width: 100%; height: 100%" class="child"></div>
			<div ref="chartRefbing2" style="width: 100%; height: 100%" class="child"></div>
		</div>

		<!-- 表格 -->
		<div v-if="bzactivetype === 1" class="parent1 mt10">
			<div ref="chartRefzhu" style="width: 100%; height: 100%"></div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
import { min } from 'xe-utils'
import * as echarts from 'echarts'
import moment from 'moment'
import DynamicTable from './DynamicTable.vue'
import {
	overviewPieStandardSystemByLevelApi,
	overviewPieStandardSystemByTypeApi,
	overviewChartStandardSystemByLevelApi,
	overviewChartStandardSystemByTypeApi
} from '@/api/statistica'
const bzactivetype = ref(0)

const typelist = ref(['全部', '分类总览', '分层总览'])

const chartRefzhu = ref(null)
const chartRefbing1 = ref(null)
const chartRefbing2 = ref(null)
let chartInstancebing1: echarts.ECharts | null = null
let chartInstancebing2: echarts.ECharts | null = null
let chartInstancebzhu: echarts.ECharts | null = null

// 示例数据
const bzglchartsdata = {
	categories: [],
	series: []
}

const chartDatabing1 = ref(null)
const chartDatabing2 = ref(null)

// 初始化图表
const initChart = () => {
	if (!chartRefzhu.value) {
		return
	}

	chartInstancebzhu = echarts.init(chartRefzhu.value)

	const option = {
		title: {
			text: '',
			left: 'center'
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: { type: 'shadow' },
			formatter: params => {
				const year = params[0].axisValue
				const yearData = zhudatainfo.value.values.find(item => item.category === year)
				return params
					.map(param => {
						const index = zhudatainfo.value.legends.indexOf(param.seriesName)
						return `${param.seriesName}: ${yearData.value[index]}`
					})
					.join('<br/>')
			}
		},
		legend: {
			data: zhudatainfo.value.legends,
			top: 'top',
			icon: 'horizontalLine', // 自定义横线图标
			itemHeight: 2, // 横线高度
			itemWidth: 15 // 横线宽度
		},
		xAxis: {
			type: 'category',
			data: zhudatainfo.value.values.map(item => item.category)
		},
		yAxis: {
			type: 'value'
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '8%',
			top: '15%',
			containLabel: true
		},
		series: zhudatainfo.value.legends.map((legend, index) => ({
			name: legend,
			type: 'bar',
			barWidth: '15%',
			data: zhudatainfo.value.values.map(item => item.value[index]),
			itemStyle: {
				color: ['#5470C6', '#91CC75', '#FAC858', '#EE6666', '#73C0DE', '#3BA272', '#9A60B4', '#FF9F7F'][index]
			}
		}))
	}
	chartInstancebzhu.clear()
	chartInstancebzhu.setOption(option)
}

const initChartbing1 = () => {
	if (!chartRefbing1.value) {
		return
	}

	chartInstancebing1 = echarts.init(chartRefbing1.value)

	const option = {
		tooltip: {
			trigger: 'item',
			formatter: '{b}: {c} '
		},
		legend: {
			show: true,
			orient: 'horizontal',
			top: 'top',
			icon: 'horizontalLine',
			itemHeight: 2,
			itemWidth: 15,
			formatter: name => {
				const index = chartDatabing1.value.names.indexOf(name)
				return `${name}: ${chartDatabing1.value.values[index]}`
			}
		},

		// legend: {
		// 	show: false,
		// 	orient: 'vertical',
		// 	right: 10,
		// 	top: 'center',
		// 	padding: [20, 20],
		// 	itemGap: 15,
		// 	formatter: name => {
		// 		const index = chartDatabing1.value.names.indexOf(name)
		// 		return `${name}: ${chartDatabing1.value.values[index]}`
		// 	}
		// },

		series: [
			{
				name: '',
				type: 'pie',
				radius: ['45%', '70%'], // 内半径40%，外半径70%
				center: ['50%', '60%'], // 圆心位置(相对容器百分比)
				avoidLabelOverlap: true,
				label: {
					show: true,
					formatter: '{b}: {d}%'
				},
				label: {
					show: false // 默认隐藏标签
				},
				emphasis: {
					label: {
						show: false // 高亮时也隐藏标签
					}
				},
				labelLine: {
					show: false // 隐藏引导线
				},
				// emphasis: {
				// 	label: {
				// 		show: true,
				// 		fontSize: '13',
				// 		fontWeight: 'bold'
				// 	}
				// },
				// labelLine: {
				// 	show: false
				// },
				data: chartDatabing1.value.names.map((name, index) => ({
					name,
					value: Number(chartDatabing1.value.values[index])
					// itemStyle: {
					// 	color: ['#5470C6', '#91CC75', '#FAC858', '#EE6666', '#73C0DE', '#3BA272', '#9A60B4', '#FF9F7F'][index]
					// }
				}))
			}
		]
	}
	chartInstancebing1.clear()
	chartInstancebing1.setOption(option)
}

const initChartbing2 = () => {
	if (!chartRefbing2.value) {
		return
	}

	chartInstancebing2 = echarts.init(chartRefbing2.value)

	const option = {
		tooltip: {
			trigger: 'item',
			formatter: '{b}: {c} '
		},
		legend: {
			show: true,
			orient: 'horizontal',
			top: 'top',

			icon: 'horizontalLine',
			itemHeight: 2,
			itemWidth: 15,
			formatter: name => {
				const index = chartDatabing2.value.names.indexOf(name)
				return `${name}: ${chartDatabing2.value.values[index]}`
			}
		},

		// legend: {
		// 	show: false,
		// 	orient: 'vertical',
		// 	right: 10,
		// 	top: 'center',
		// 	padding: [20, 20],
		// 	itemGap: 15,
		// 	formatter: name => {
		// 		const index = chartDatabing1.value.names.indexOf(name)
		// 		return `${name}: ${chartDatabing1.value.values[index]}`
		// 	}
		// },
		series: [
			{
				name: '',
				type: 'pie',
				radius: ['45%', '70%'], // 内半径40%，外半径70%
				center: ['50%', '60%'], // 圆心位置(相对容器百分比)
				avoidLabelOverlap: true,
				label: {
					show: true,
					formatter: '{b}: {d}%'
				},
				label: {
					show: false // 默认隐藏标签
				},
				emphasis: {
					label: {
						show: false // 高亮时也隐藏标签
					}
				},
				labelLine: {
					show: false // 隐藏引导线
				},
				// emphasis: {
				// 	label: {
				// 		show: true,
				// 		fontSize: '13',
				// 		fontWeight: 'bold'
				// 	}
				// },
				// labelLine: {
				// 	show: false
				// },
				data: chartDatabing2.value.names.map((name, index) => ({
					name,
					value: Number(chartDatabing2.value.values[index])
					// itemStyle: {
					// 	color: ['#5470C6', '#91CC75', '#FAC858', '#EE6666', '#73C0DE', '#3BA272', '#9A60B4', '#FF9F7F'][index]
					// }
				}))
			}
		]
	}
	chartInstancebing2.clear()
	chartInstancebing2.setOption(option)
}
// 响应式调整图表大小
const resizeChart = () => {
	chartInstancebing1?.resize()
	chartInstancebzhu?.resize()
	chartInstancebing2?.resize()
}

onMounted(() => {
	window.addEventListener('resize', resizeChart)
	overviewPieStandardSystemByLevelApi().then(res => {
		chartDatabing1.value = res.data
		setTimeout(() => {
			nextTick(() => {
				initChartbing1()
			})
		}, 800)
	})
	overviewPieStandardSystemByTypeApi().then(res => {
		chartDatabing2.value = res.data
		setTimeout(() => {
			nextTick(() => {
				initChartbing2()
			})
		}, 800)
	})
})

// 转换函数
const transformToSeries = (legends, values) => {
	return legends.map((legend, legendIndex) => ({
		name: legend,
		data: values.map(item => item.value[legendIndex])
	}))
}
onBeforeUnmount(() => {
	window.removeEventListener('resize', resizeChart)

	chartInstancebzhu?.dispose()
	chartInstancebing1?.dispose()
	chartInstancebing2?.dispose()
})

const zhudatainfo = ref(null)
const bztypechange = (index: number) => {
	bzactivetype.value = index
	window.removeEventListener('resize', resizeChart)
	if (index === 0) {
		overviewPieStandardSystemByLevelApi().then(res => {
			chartDatabing1.value = res.data
			setTimeout(() => {
				nextTick(() => {
					initChartbing1()
				})
			}, 800)
		})
		overviewPieStandardSystemByTypeApi().then(res => {
			chartDatabing2.value = res.data
			setTimeout(() => {
				nextTick(() => {
					initChartbing2()
				})
			}, 800)
		})
	} else if (index === 1) {
		overviewChartStandardSystemByLevelApi().then(res => {
			console.log(res, 'sgsgsgsgsgsgsg')
			zhudatainfo.value = res.data
		})
		setTimeout(() => {
			nextTick(() => {
				initChart()
			})
		}, 800)
	} else {
		overviewChartStandardSystemByTypeApi().then(res => {
			console.log(res, 'sgs2222222222222gsgsgsgsgsg')
			zhudatainfo.value = res.data
		})
		setTimeout(() => {
			nextTick(() => {
				initChart()
			})
		}, 800)
	}
}
</script>

<style lang="scss" scoped>
.content {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
}

.parent1 {
	overflow-x: auto;

	/* 允许换行 */
	gap: 10px;
	height: 100%;
	/* 子元素间距 */

	&::-webkit-scrollbar {
		display: none;
	}
}

.title {
	font-size: 15px;
	font-weight: 500;
	color: #333;
}

.tabbj {
	background-color: #f5f6fa;

	border-radius: 3px;
	color: #333;
	padding: 4px 0px;

	span {
		padding: 3px 5px;
		border-radius: 3px;
		margin: 0 3px;

		cursor: pointer;
		transition: all 0.3s ease;
		/* 添加过渡动画 */
	}

	.active {
		background-color: #fff;

		/*transform: translateY(-3px);*/
		color: #1491ff;
		/* 轻微上浮效果 */

		/* 阴影动画 */
	}
}

.paddingbottom10 {
	padding-bottom: 10px;
}

.borderea {
	border-bottom: solid 1px #ebeef5;
}

.parent {
	display: flex;
	flex-wrap: wrap;
	/* 允许换行 */
	gap: 10px;
	height: 100%;
	/* 子元素间距 */
}

.child {
	flex: 0 1 calc(50% - 10px);
	/* 撑满父元素宽度的一半，减去间距 */
	min-width: calc(50% - 10px);
	/* 防止内容过少时换行 */
	box-sizing: border-box;
	/* 包含 padding 和 border */
	// padding: 15px 10px;
	// background: #fafafc;
	// border-radius: 5px;
	display: flex;

	align-items: center;
}

.parenttitle {
	font-size: 14px;
	font-weight: 500;
	color: #666;
}

.parennumber {
	font-size: 12px;

	color: #333;

	span {
		font-size: 15px;
		font-weight: 600;
	}
}

/* font-family: Arial, sans-serif; */
</style>
